<template>
  <div class="recharge">
    <img src="@/assets/chongzhi1.png" class="top-img" alt="">
    <div class="div-list clear">
      <div class="item" v-for="(item, index) in recharge" :key="index" :class="(is_num == index+1) ? 'active' : ''" @click="item_click(index+1)">
        <p class="price">{{item.money_add}}元</p>
        <p class="give">赠送{{item.money_send}}元</p>
      </div>
      <!-- <div class="item" :class="(is_num == 2) ? 'active' : ''" @click="item_click(2)">
        <p class="price">20元</p>
        <p class="give">赠送20元</p>
      </div>
      <div class="item" :class="(is_num == 3) ? 'active' : ''" @click="item_click(3)">
        <p class="price">50元</p>
        <p class="give">赠送50元</p>
      </div>
      <div class="item" :class="(is_num == 4) ? 'active' : ''" @click="item_click(4)">
        <p class="price">100元</p>
        <p class="give">赠送100元</p>
      </div>
      <div class="item" :class="(is_num == 5) ? 'active' : ''" @click="item_click(5)">
        <p class="price">200元</p>
        <p class="give">赠送200元</p>
      </div>
      <div class="item" :class="(is_num == 6) ? 'active' : ''" @click="item_click(6)">
        <p class="price">500元</p>
        <p class="give">赠送500元</p>
      </div> -->
    </div>
    <p class="tip">点击立即充值即表示已阅读并同意 <span @click="router({path: './rechargeAgree'})">充值规则协议</span></p>
    <span class="recharge-btn" @click="now_money_add">立即充值 <span v-if="is_num>0">{{recharge_money}}元</span></span>
  </div>
</template>

<script>
import { getMoneyLists, nowMoneyAdd } from '@/api/api'
import { wexinPay } from '@/config/wxpay'
import { AlertModule } from 'vux'
export default {
  data () {
    return {
      is_num: 0,
      recharge: [],
      recharge_money: '',
      recharge_id: '',
    }
  },
  created () {
    this.uid = sessionStorage.getItem('uid')
    this.get_money_lists()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    item_click (index) {
      this.is_num = index
      this.recharge_money = this.recharge[index-1].money_add
      this.recharge_id = this.recharge[index-1].id
    },
    get_money_lists() {
      getMoneyLists().then((res) => {
        this.recharge = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
    now_money_add() {
      if(!this.recharge_id){
        AlertModule.show({
          title: '温馨提示',
          content: '请选择充值余额',
        })
        return;
      }
      var data = {
        id: this.recharge_id,
        uid: this.uid
      }
      nowMoneyAdd(data).then((res) => {
        wexinPay(res.data.info.jsapi, (sucRes) => {
          this.router({path: './rechargeSucess', query: {price: this.recharge_money}});
        }, (err) => {
          console.dir(err)
        })
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.recharge
  .top-img
    margin-top 1.5rem
  .div-list
    margin 0 1.5rem
    .item
      width calc(50% - .5rem)
      margin-right 1rem
      float left
      height 6rem
      background-color #F5F7FA
      text-align center
      margin-bottom 1rem
      border-radius .4rem
      &:nth-child(2n)
        margin-right 0
      .price
        font-size 1.8rem
        font-weight 500
        line-height 2.5rem
        height 2.5rem
        padding-top .8rem
      .give
        font-size 1.2rem
        line-height 2rem
        height 2rem
        color #FE9700
    .active.item
      color #fff
      background-color #FE9700
      .give
        color #fff
  .tip
    text-align center
    font-size 1.3rem
    color #333333
    position fixed
    width 100%
    bottom 7rem
    span
      color #43A047
  .recharge-btn
    margin 1rem
    width calc(100% - 2rem)
    background-color #43A047
    color #fff
    display block
    height 5rem
    position fixed
    line-height 5rem
    font-size 1.8rem
    font-weight bold
    bottom 0
    text-align center
    border-radius .4rem
</style>